<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      margin: 0;
    }
    canvas {
      width: 100vw;
      height: 100vh;
      display: block;
    }
  </style>
  <body>
    <canvas id="c"></canvas>
    <script id="vertex-shader-2d" type="notjs">

      // 一个属性变量，将会从缓冲中获取数据
      attribute vec4 a_position;

      // 所有着色器都有一个main方法
      void main() {

        // gl_Position 是一个顶点着色器主要设置的变量
        gl_Position = a_position;
      }
    </script>

    <script id="fragment-shader-2d" type="notjs">

      // 片段着色器没有默认精度，所以我们需要设置一个精度
      // mediump是一个不错的默认值，代表“medium precision”（中等精度）
      precision mediump float;

      void main() {
        // gl_FragColor是一个片段着色器主要设置的变量
        gl_FragColor = vec4(1, 0, 0.5, 1); // 返回“瑞迪施紫色”
      }
    </script>
  </body>
  <script src="../webgl-utils.js"></script>
  <script src="./index.js" type="text/javascript"></script>
</html>
